<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>datatable学习</title>
    <link rel="stylesheet" href="/css/datatables.css"/>
    <link rel="stylesheet" href="/css/jquery-ui.css">
    <link rel="stylesheet" href="/css/dataTables.jqueryui.css">
    <!--分页需要-->
    <link rel="stylesheet" href="/css/jquery.dataTables.css"/>
</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
    </tbody>
</table>


<div class="text-info">
    <div id="display"></div>
</div>
<hr>

数据属性
<span style="color: greenyellow;">
    Html5数据属性
在有些情况下，显示的数据可能不是用来排序的，只是为了直观的展示给用户看，比如电话号码xxxx-xxxxxxxx，中间有一个斜杠，对于程序排序不怎么好处理 html5有
    data-sort或者data-order来排序 ，data-filter或者data-search来搜索，下面的例子演示了， 显示的和搜索的是不同
以Tiger Nixon 为例，显示的是 T. Nixon，搜索的是Tiger Nixon
</span>

<table id="example2" class="display" cellspacing="0" width="100%">                
    <thead>                      
    <tr>                     
        <th>Name</th>                   
        <th>Position</th>                    
        <th>Office</th>                      
        <th>Age</th>                  
        <th>Start date</th>                     
        <th>Salary</th>                       
    </tr>                
    </thead>           
    <tbody>                      
    <tr>      
        <td data-search="Tiger Nixon">T. Nixon</td>               
        <td>System Architect</td>                     
        <td>Edinb</td>                      
        <td>61</td>    
        <td data-order="1303686000">Mon 25th Apr 11</td>          
        <td data-order="320800">$320,80</td>                     
    </tr>
    <tr>   
        <td data-search="Garrett Winters">G. Winters</td>                  
        <td>Accountant</td>                      
        <td>Tok</td>                      
        <td>63</td>    
        <td data-order="1311548400">Mon 25th Jul 11</td>       
        <td data-order="170750">$170,750/y</td>                       
    </tr>                                
    </tbody>
                    
</table>

</body>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/datatables.js"></script>
<script type="text/javascript">
    $(function () {
        var eventFired = function (type) {
            //jquery对象转化为JS对象
            var ev = $('#display')[0];
            ev.innerHTML += "<div>" + type + '事件触发 || 当前时间' + new Date() + "</div>";
            ev.scrollTop = ev.scrollHeight;

        };

        //链式给表格绑定事件
        var myTableExample = $("#example").on('order.dt', function () {
            eventFired("排序------");
        }).on("search.dt", function () {
            eventFired("搜索------");
        }).on("page.dt", function () {
            eventFired("翻页------");
        }).DataTable();


        /**
         * 在新版本中 var myTableExample = $("#example").dataTable();这样写会出现错误
         * Uncaught TypeError: myTableExample.row is not a function
         at HTMLTableRowElement.<anonymous> (datatable-ai-event:133)
         at HTMLTableSectionElement.dispatch (jquery-3.2.1.min.js:3)
         at HTMLTableSectionElement.q.handle (jquery-3.2.1.min.js:3)

         因此改为--------------------》》》DataTable
         var myTableExample = $("#example").DataTable();
         *
         *
         * */


        //处理Data table在dom中添加和删除行时出现的问题
        //选中某一行数据的处理方式
        //1、选中表 $("#example tbody")
        //2、选中行 "tr"
        $("#example tbody").on("click", "tr", function () {

            //
            var data = myTableExample.row(this).data();
            alert("你选中的数据：" + data[0]);
        });

        //列渲染。隐藏某一列的值，并将此列的值与第一列的值合并
        $("#example2").dataTable({
            //行回调
            "createdRow":function (row,data,index) {
                /*if(data[5].replace(/[\$,]/g,'') * 1 > 1000){
                    $('td',row).eq(5).css('font-weight','bold').css("color","red");
                }*/
            },

            "columnDefs": [{
                "render": function(data, type, row) {
                    return data + ' (' + row[3] + ')';
                },
                "targets": 0
            },
                {
                    "visible": false,
                    "targets": [3]
                }],
           // "dom":'<"toolbar">frtip',

            //自定义长度菜单
            "lengthMenu":[[2,4,6,-1],["二","Ⅳ","六","All"]]
        });

        $('div.toolbar').html("<b style='color: red;'>自定义按钮</b>");

    });


</script>
</html>